import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  @override
  _GridVIewPageState createState() => _GridVIewPageState();
}

class _GridVIewPageState extends State<GridViewPage> {
  List<String> ctiyList = [
    "上海",
    "背景",
    "上海",
    "背景",
    "西安",
    "上海",
    "西安",
    "上海",
    "背景",
    "西安"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridView学习"),
      ),
      body: GridView.count(
        crossAxisCount: 3,
        children: _buildList(),
      ),
    );
  }

  List<Widget> _buildList() {
    return ctiyList.map((city) => _item(city)).toList();
  }

  Widget _item(String city) {
    return Container(
      width: 160,
      margin: EdgeInsets.only(bottom:5,right: 5),
      decoration: BoxDecoration(color: Colors.teal),
      child: Center(
        child: Text(
          city,
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }
}
